<template>
		
	<!--主框架 -->
	<view style="background-color: #f9f9f9">
			<u-form style="width: 100%;" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<view class="stru">
					<!-- 城市 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>城市</text>
						</view>
						<view class="pub-conten" @click="showAdress(model.address)">
							<input type="text" v-model="model.address" disabled />
							<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
						</view>
					</view>
					
					<!-- 小区名称 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>小区名称</text>
						</view>
						<view class="pub-content col" @click="selectHouse(model.address)" >
							<u-form-item prop="house"><u-input v-model="model.house" placeholder="请选择" disabled @click="selectHouse(model.address)"/></u-form-item>
							<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
						</view>
					</view>
					
					<!-- 座栋单元房号 -->
					<view class="pub-view" v-if="type == 1 || type == 2">
						<view class="pub-text">
							<text>座栋单元房号</text>
						</view>
						<view class="pub-content col">
							<u-form-item prop="unitNumber"><u-input v-model="model.unitNumber" placeholder="请输入"/></u-form-item>
							<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
						</view>
					</view>
					
					<!-- 其他要求 -->
					<view class="pub-view last" v-if="type == 3 || type == 4">
						<view class="pub-text">
							<text>其他要求</text>
						</view>
						<view class="pub-content col">
							<u-form-item prop="requirement"><u-input v-model="model.requirement" placeholder="请输入"/></u-form-item>
							<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
						</view>
					</view>
					
					<!-- 期望售价(万元)-->
					<view class="pub-view last" v-if="type == 1">
						<view class="pub-text">
							<text>期望售价(万元)</text>
						</view>
						<view class="pub-content col">
							<u-form-item prop="price"><u-input v-model="model.price" type="number" placeholder="请输入"/></u-form-item>
							<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
						</view>
					</view>
					
					<!-- 期望售价(元/月)-->
					<view class="pub-view last" v-if="type == 2">
						<view class="pub-text">
							<text>期望售价(元/月)</text>
						</view>
						<view class="pub-content col">
							<u-form-item prop="monthlyRent"><u-input v-model="model.monthlyRent" type="number" placeholder="请输入"/></u-form-item>
							<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
						</view>
					</view>
					
				</view>
			
				<view class="stru top">
					<!-- 你的称呼 -->
					<view class="pub-view" v-if="type == 1 || type == 2 || type == 3 || type == 4">
						<view class="pub-text">
							<text>你的称呼</text>
						</view>
						<view class="pub-content col">
							<u-form-item prop="name"><u-input v-model="model.name" placeholder="请输入"/></u-form-item>
							<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
						</view>
					</view>
					
					<!-- 你的手机号 -->
					<view class="pub-view" v-if="type == 1 || type == 2 || type == 3 || type == 4">
						<view class="pub-text">
							<text>你的手机号</text>
						</view>
						<view class="pub-content col">
							<u-form-item prop="phone"><u-input v-model="model.phone" placeholder="请输入"/></u-form-item>
							<image src="../../../static/inster/dayu.png" mode="widthFix" class="img">
						</view>
					</view>
					
					<view class="submit">
						<u-button @click="submit(type)" class="u-but" type="warning">提交委托</u-button>
					</view>
				</view>
		</u-form>
	</view>
</template>

<script>
var { log } = console;

import { publicing } from '../../../api/api.js';
import {errdata} from '../../../api/errdata.js';
// 引入请求地址
import { sellEntrustUrl } from '../../../api/request.js';
import { rentEntrustUrl } from '../../../api/request.js';
import { buyHousingEntrustUrl } from '../../../api/request.js';
import { rentHousingEntrustUrl } from '../../../api/request.js';
// 解构console
var { log } = console;
// 定义数据库
var db = wx.cloud.database()
var users = db.collection('user')
// 引入vuex的mapstate
import { mapState } from 'vuex';
export default {
	data() {
		return {
			type:'', 		// 传入类型 1/有房出售 2/有房出租 3/我要买房 4/我要租房
			data:'',		// 传入的数据
			url:'',			// 提交委托url
			// 表单内的数据
			model: {
				id:'', // openid
				address: '',			// 3/我要买房 4/我要租房 城市	
				house: '',
				unitNumber: '',
				price: '',				// 1/有房出售 期望售价(万元)
				monthlyRent: '',		// 2/有房出租 期望售价(元/月)
				requirement:'',			// 3/我要买房 4/我要租房 其他要求
				name: '',
				phone: '',
				demandType:''			// 0:我要租房 1:我要买房
				
			},
			// 表单校验规则
			rules: {
				house:[
					{
						required: true,
						message: '请选择小区名称'
					}
				],
				unitNumber:[
					{
						required: true,
						message: '请输入座栋单元号'
					}
				],
				price:[
					{
						required: true,
						message: '请输入期望售价'	
					}
				],
				monthlyRent:[
					{
						required: true,
						message: '请输入期望售价'	
					}
				],
				requirement:[
					{
						required: true,
						message: '请输入其他要求'	
					}
				],
				name:[
					{
						required: true,
						message: '请输入你的称呼'	
					}
				],
				phone:[
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change','blur'],
					},
					{
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change','blur'],
					}
				]
			},
			errorType : ['toast'],	
			addressData:'',
			houseData:'',
		};
	},
	
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},

	// 接收首页面的路径数据
	onLoad(e) {
		let objdata = JSON.parse(e.obj);
		this.model.address = objdata.address;
		this.model.id = objdata.id;
		this.type = objdata.type;
	},

	methods: {
		submit(type) {
			if(type == '1'){
				log('type的值:'+type)
				this.data = {
					residentialName:this.model.house,		// 小区名
					locationNumber:this.model.unitNumber,	// 座栋单元房号
					expectPrice:this.model.price,			// 期望售价(万元)
					callName:this.model.name,				// 称呼
					sellPhone:this.model.phone,				// 手机号
					userId:this.model.id,
				}
				this.url = sellEntrustUrl 
			}
			if(type == '2'){
				log('type的值:'+type)
				this.data  = {
					residentialName:this.model.house,		// 小区名
					locationNumber:this.model.unitNumber,	// 座栋单元房号
					monthlyRent:this.model.monthlyRent,			// 期望售价(万元)
					callName:this.model.name,				// 称呼
					sellPhone:this.model.phone,				// 手机号
					userId:this.model.id,
				}
				this.url = rentEntrustUrl 
			}
			
			if(type == '3'){
				log('type的值:'+type)
				this.data  = {
					city:this.model.address,				// 城市
					residentialName:this.model.house,		// 小区名
					requirement:this.model.requirement,		// 其他要求	
					callName:this.model.name,				// 称呼
					demandPhone:this.model.phone,				// 手机号
					userId:this.model.id,					// 用户标识
					demandType:'1'							// 0:我要租房 1:我要买房
				}
				this.url = buyHousingEntrustUrl 
			}
			
			if(type == '4'){
				log('type的值:'+type)
				this.data  = {
					city:this.model.address,				// 城市
					residentialName:this.model.house,		// 小区名
					requirement:this.model.requirement,		// 其他要求	
					callName:this.model.name,				// 称呼
					demandPhone:this.model.phone,				// 手机号
					userId:this.model.id,					// 用户标识
					demandType:'0'							// 0:我要租房 1:我要买房
				}
				this.url = rentHousingEntrustUrl 
			}
			
			log('data的值:'+ this.data)
			
			this.$refs.uForm.validate(valid => {
				if (valid) {
				publicing(this.url, this.data)
					.then(res => {
						log(res);
						if (res.data.message == "成功") {
							let errs = '提交成功'
							errdata.errlist(errs)
							
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500);
						} else {
							let errs = '提交失败'
							errdata.errlist(errs)
						}
					})
					.catch(err => {
						log(err);
					});
					
					
				} else {
					console.log('验证失败');
				}
			});
		},
		
		
		// 重新定位城市
		showAdress(address){
			log("定位城市值:" + address)
			let obj = {
				address:address
			}
			let objStr = JSON.stringify(obj);
			log('跳转重新定位页面的值:' + objStr);
			wx.navigateTo({
				url: '../adress/adress?obj='+objStr
			});
		},
		
		selectHouse(address){
			log("定位城市值:" + address)
			let obj = {
				address:address
			}
			let objStr = JSON.stringify(obj);
			log('跳转重新定位页面的值:' + objStr);
			wx.navigateTo({
				url: 'selectHouse?obj='+objStr
			});
		}
	},
	computed:{
		...mapState(['addressdata','housedata']),
		getAddress() {
			this.addressData = this.addressdata.addressstr
			log("数据仓库取出的城市:"+this.addressData)
			
			this.houseData = this.housedata.housestr
			log("数据仓库取出的小区:"+this.houseData)
		}
	},
	// 侦听器
	watch:{
		addressData(newValue,oldValue){
			log("侦听器值:"+newValue)
			this.model.address = newValue
			log("model.address"+this.model.address)
		},
		houseData(newValue,oldValue){
			log("小区-侦听器值:"+newValue)
			this.model.house = newValue
			log("111111:"+this.model.house)
		}
		
	}
	
};
</script>

<style scoped>
	page{
	    background-color: #F5F5F5;
	}
	.yu{
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
	}
	.frame{
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.pub-view{
		height: 110upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #e6e6e6 solid;
		margin-left: 60upx;
	}
	.last{
		border:none
	}
	.con{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.pub-conten{
		width: 85%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.pub-content{
		width: 74%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.pub-content input{
		width: 63%;
		}
	.col{
		color: #848484;
	}
	
	.tnt{
		margin-right: 63upx;
	}
	.img{
		margin-right: 20upx;
		padding: 20upx;
		width: 40upx !important;
		height: 40upx !important;
	}
	.stru{
		background-color: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top{
		margin-top: 25upx;
	}
	.submit{
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		height: 130upx;
		border-top: 1px solid #e6e6e6;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.u-but{
		color:#f08e23;
		font-size: 35upx;
		width: 90%;
		border-radius: 25upx;
		text-align: center;
	}
</style>
